<template>
	<div class="chart">
		<i-Circle :size="94" :percent="getPercent() > 100 ? 100 : getPercent()" :stroke-color="color">
			<div style="display: flex;flex-direction:column">
				<span class="demo-Circle-inner" style="font-size: 15px">{{ getPercent() + '%' }}</span>
				<span class="demo-Circle-inner" style="font-size: 10px;margin-top: 5px">{{ qualifiedQuantity }}/{{planProduceQuantity}}</span>
			</div>
            <!-- <p>消费人群规模</p>
            <span>
                总占人数
                <i>75%</i>
            </span>
        </div>
			<span class="demo-Circle-inner" style="font-size: 18px">{{ getPercent() + '%' }}</span> -->
		</i-Circle>
	</div>
</template>

<script>
export default {
	props: ['qualifiedQuantity', 'planProduceQuantity', 'qualifiedRate'],
	data() {
		return {
			id: this.getID(),
			myChart: null,
		};
	},
	computed: {
		color() {
			let color = '#2db7f5';
			const percent = this.getPercent();
			if (percent >= 100) {
				color = '#5cc4ad';
			} else if (percent <35) {
				color = '#ff5500';
			}
			return color;
		},
	},
	// watch: {
	// 	planProduceQuantity() {
	// 		this.initChart();
	// 	},
	// },
	methods: {
		getID() {
			return 'oeeboard-chart1-' + new Date().getTime() + Math.random();
		},
		resize() {
			this.myChart.resize();
		},
		getPercent() {
			return this.planProduceQuantity == 0 ? 0 : ((Number(this.qualifiedQuantity) * 100) / Number(this.planProduceQuantity)).toFixed(1);
		},
		// initChart() {
		// 	this.myChart = echarts.init(document.getElementById(this.id));
		// 	const option = {
		// 		title: {
		// 			text: this.planProduceQuantity == 0 ? '0.0%' : ((Number(this.qualifiedQuantity) * 100) / Number(this.planProduceQuantity)).toFixed(1) + '%',
		// 			subtext: `${this.qualifiedQuantity}/${this.planProduceQuantity}`,
		// 			// subtext:this.planProduceQuantity,
		// 			left: 'center',
		// 			top: '30%',
		// 		},
		// 		tooltip: {
		// 			show: false,
		// 		},
		// 		series: [
		// 			{
		// 				type: 'pie',
		// 				color: ['#11b59e', '#e3eaf7'],
		// 				radius: ['70%', '80%'],
		// 				hoverAnimation: false,
		// 				label: {
		// 					show: true,
		// 					position: 'center',
		// 					normal: {
		// 						show: false,
		// 						position: 'center',
		// 					},
		// 				},
		// 				data: [{ value: this.qualifiedQuantity }, { value: this.planProduceQuantity - this.qualifiedQuantity }],
		// 			},
		// 		],
		// 	};
		// 	this.myChart.setOption(option);
		// },
	},
	mounted() {
		// this.$nextTick(() => {
		// 	this.initChart();
		// });
	},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
	width: 100%;
	/* height: 100%; */
}
</style>
